<template>
  <div>
    <div class="top flexBetweenCenter">
      <div class="flexStart">
        <div class="rigntMargin">
          <a-range-picker
            v-decorator="['orderTime']"
            v-model="dayTime"
            :disabled-date="disabledDate"
            @openChange="onOpenChange"
            @calendarChange="onCalendarChange"
            @change="onChangeTimer"
            :placeholder='placeholder'
          />
        </div>
        <div>
          <a-button style="font-size:16px" @click="exportTable">
            <span style="display:inline-block;hight:32px"></span>导出
          </a-button>
        </div>
      </div>
      <div>
        <a-input-search
          placeholder="请输入姓名"
          v-model="fullName"
          style="width: 300px"
          @search="onSearch"
        />
      </div>
    </div>
    <!-- 表格 -->
    <div class="atable">
      <a-table :columns="columns" :data-source="data" :pagination="false">
      
        <span slot="fullName" slot-scope="text,record">
            <a style="color:#1890FF" @click="onDetail(record)">{{record.fullName}}</a>
        </span>
      </a-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="this.configFun.pageNum(total)"
          show-size-changer
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span>{{ props.value }}条/页</span>
            <!-- <span v-if="props.value === '40'">全部</span> -->
          </template>
        </a-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { dayAttendance } from '@/api/attendance'
import { mapGetters } from 'vuex'
const columns = [
  { title: '日期', dataIndex: 'recordDate', key: 'recordDate' },
  { title: '姓名', dataIndex: 'fullName', key: 'fullName',scopedSlots: { customRender: 'fullName' } },
  { title: '岗位', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '考勤记录（当天首次时间）', dataIndex: 'recordTime', key: 'recordTime', align: 'center' },
  { title: '考勤方式', dataIndex: 'deviceNumber', key: 'deviceNumber', align: 'center' }
]
const tabdata = [
  {
    key: '1',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '2',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '3',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '4',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '5',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  }
]
export default {
  data() {
    return {
      dayTime:[moment(new Date()).format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')],
      placeholder:['请选择','请选择'],
      columns,
      data: [],
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      fullName: '',
       fromTime:'',
      toTime:''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    // console.log(this.monthTime)
    this.fromTime = this.dayTime[0]
    this.toTime =this.dayTime[1]
    this.getDay()
  },
  methods: {
    moment,
    onDetail(text) {
      const { href } = this.$router.resolve({
        path: `/personnelInformationManage/${text.id}`,
        query: { id: text.id }
      })
      window.open(href, '_blank')
    },

     //搜索时获取满足的有多少页
    getTotal(val, current) {
      let size = ''
      let page = ''
      if (val) {
        size = val
      } else {
        size = this.pageSize
      }
      if (current) {
        page = current
      } else {
        page = this.current
      }
       let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        startTime: this.fromTime,
        typeCode: '1'
      }
      dayAttendance(data).then((res) => {
        let data = res.data
        this.total = data.total
        //   console.log(Math.ceil(this.total/size));
        // console.log(page);
        if (Math.ceil(this.total / size) < page) {
          this.current = 1
        } else {
          this.current = page
        }

        this.pageSize = size
        this.getDay()
      })
    },
    getDay() {
      let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        startTime: this.fromTime,
        typeCode: '1'
      }
      dayAttendance(data).then((res) => {
        let data = res.data.data
        data.forEach((item, index) => {
          item.key = index
          if (item.deviceNumber == null) {
            item.deviceNumber = '微信'
          } else {
            item.deviceNumber = '考勤机'
          }
        })
        this.data = data
        this.total = res.data.total
      })
    },
    onSearch(value) {
      this.getTotal()
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
     this.getTotal(pageSize, this.current)
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    },
    timeChange(e) {
      console.log(e)
    },
    /**
     * 清空禁用时间段的设置
     */
    onOpenChange(status) {
      // 清空禁用时间段的设置
      this.disabledCurrent = null
    },
    /**
     * 获取手动选择的时间段起始值
     */
    onCalendarChange(dates) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // 获取手动选择的时间段起始值
      this.disabledCurrent = dates[0]
    },
    /**
     * 时间控制切换赋值
     */
    onChangeTimer(moment, data) {
      this.fromTime = data[0]
      this.toTime = data[1]
      this.current=1
      this.getDay()
    },
    /**
     * 1、时间限制范围 开始时间~结束时间不能超过31天
     */
    disabledDate(current) {
      if (!this.disabledCurrent) return false

      return (
        (current &&
          current <
            moment(this.disabledCurrent)
              .subtract(1, 'M')
              .startOf('day')) ||
        current >
          moment(this.disabledCurrent)
            .add(1, 'M')
            .endOf('day')
      )
    },
    exportTable() {
      let data = {
        endTime: this.toTime,
        likeFullName: this.fullName,
        // orgId: this.userInfo.orgId,
        // page: this.current,
        // size: this.pageSize,
        startTime: this.fromTime,
        typeCode: '1',
        teamId: ''
      }
      window.open(
        process.env.VUE_APP_BASE_API +
          '/v1/orgPerson/clock/day/export?teamId=' +
          '' +
          '&typeCode=' +
          '1' +
          '&likeFullName=' +
          this.fullName +
          '&startTime=' +
          this.fromTime +
          '&endTime=' +
          this.toTime,
        '_blank'
      )

      this.$message.success('导出成功')
    }
  }
}
</script>

<style scoped>
/* ::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
} */

::v-deep .ant-calendar-picker-input.ant-input {
  width: 320px;

  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top: 30px;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 20px;
}
</style>